'use strict';

import React, {Component, PropTypes} from 'react';

import $ from 'jquery';

import cardback from '../img/authen/cardback.jpg'
import cardfront from '../img/authen/cardfont.jpg'
import idcard from '../img/authen/idcard.png'
import name from '../img/authen/name.png'

import {R_header} from './common/index'

import Model from './common/model'

import reason from '../img/more/reason.png'

import {HttpService, Toast, Tool, imgUpload} from '../utils'

class Authen extends React.Component {
    static contextTypes = {
        router: React.PropTypes.object.isRequired
    };
    constructor() {
        super();
        this.state = {
            model: {}
        };
        this.front = '';
        this.back = '';
        this.modelConfig = {
            model_content: true,
            header: <div className="season-header border-bottom">
                <div className="step s-center">
                    <div className="app-hong-font28 s-center">
                        <img src={reason} className="app-headerImg"/>
                        <div>认证不通过的原因</div>
                    </div>
                </div>
            </div>,
            content: <div className="content app-padding-tb20">

                <div className="_content">
                    <div className="s-flex-d">
                        <div>1. 姓名和身份证不匹配</div>
                        <div>2. 身份证正面照片不合格</div>
                        <div>3. 身份证反面照片不合格</div>
                    </div>
                </div>

            </div>,
            footer: <div className="season-footer step">
                    <div className="s-center">
                        <div className="btn" onClick={this.know.bind(this)}>我知道了</div>
                    </div>
                </div>
        }
    }

    know() {
        this.setState({
            model: {
                flag: false
            }
        })
    }

    reason(flag) {
        this.setState({
            model: {
                flag: flag
            }
        })

    }

    //图片上传的表单
    upLoadImg(inputId, imgId) {
        Toast.toast('正在上传图片，请稍后...', 0)
        let rct = this;
        let peal = document.getElementById('totalpeal');
        peal.style.display = 'block';
        imgUpload({
            inputId, imgId, imgIeId: imgId,
            //scale: '1:1',
            //width:200,
            //height: 888
            size: 5
        }, function(status, msg) {
            peal.style.display = 'none';
            if (status) {
                if (inputId == 'upcard1') {
                    rct.front = msg;
                    Toast.toast('身份证正面照已上传');
                } else {
                    rct.back = msg;
                    Toast.toast('身份证反面照已上传');
                }
            } else {
                Toast.toast(msg);
                if (inputId == 'upcard1') {
                    document.getElementById('upimg1').src = cardfront;
                } else {
                    document.getElementById('upimg2').src = cardback;
                }
            }
        });
    }

    async auth() {
        const idcard = this.refs.idcard.value;
        const username = this.refs.username.value;
        const front = this.refs.front.value;
        const back = this.refs.back.value;
        if (username == '') {
            Toast.toast('请输入您的真实姓名');
            return;
        }
        if (username.length > 5) {
            Toast.toast('姓名长度不超过5位');
            return;
        }
        if (idcard == '') {
            Toast.toast('请输入您的身份证号');
            return;
        } else {
            var valid = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/; //默认15位
            if (idcard.length == 18)
                valid = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X|x)$/; //18位
            if (!valid.test(idcard)) {
                Toast.toast('请输入正确的身份证号');
                return;
            }
        }
        if (front == '' || back == '') {
            Toast.toast('请上传图片');
            return;
        }
        let peal = document.getElementById('totalpeal');
        let backData = {};
        peal.style.display = 'block';
        Toast.toast('正在提交，请稍后...', 0);

        let data = new FormData();
        data.append('token', localStorage.appToken);
        data.append('devicetelephone', this.props.params.phone);
        data.append('username', username);
        data.append('idcard', idcard);
        data.append('front', this.front, this.front.filename);
        data.append('back', this.back, this.back.filename);
        let rct = this;
        $.ajax({
            url: '/app/user/auth',
            type: 'POST',
            data: data,
            cache: false,
            contentType: false, //不可缺
            processData: false, //不可缺
            success: function(res) {
                Toast.toast(res.msg);
                peal.style.display = 'none';
                if (res.code == 10158)
                    rct.context.router.push('/map/' + localStorage.appToken + '/' + localStorage.userid)
            },
            error: function() {
                Toast.toast('网络连接错误');
                peal.style.display = 'none';
            }
        });
    }

    render() {
        const {model} = this.state;
        return (
            <form className="app-container" id='authenbox'>

                <R_header left="1" title="选择设备类型" right="3" auSeason={this.reason.bind(this)}/>
                <Model modelConfig={this.modelConfig} flag={model.flag}/>
                <div className="app-margin-tb20">
                    <div className="step app-white-chunk border-bottom">
                        <div className="s-flex-zero app-padding-lr24">
                            <img src={name} className="app-headerImg"/>
                        </div>
                        <div className="s-flex2">
                            <input type="text" className="app-333-font28" ref="username" placeholder="请输入您的真实姓名"/>
                        </div>
                    </div>
                    <div className="step app-white-chunk border-bottom">
                        <div className="s-flex-zero app-padding-lr24">
                            <img src={idcard} className="app-headerImg"/>
                        </div>
                        <div className="s-flex2">
                            <input type="text" className="app-333-font28" ref="idcard" placeholder="请输入您的身份证"/>
                        </div>
                    </div>
                </div>

                <div className="step app-white">
                    <div className="app-333-font28 app-padding-l24 app-padding-t20">上传身份证</div>
                </div>

                <div className="step app-white app-padding-lr40">
                    <div className="s-flex1">
                        <div className="step s-flex-d">
                            <div className="app-textAlgin app-333-font24">正面照片</div>
                            <div className="card">
                                <label for='upcard1'>
                                    <img id='upimg1' src={cardfront} className="app-all-img"/>
                                    <input className='upcard' id='front' name='front' ref='front' type="file" id="upcard1" accept="image/*" onChange={this.upLoadImg.bind(this, 'upcard1', 'upimg1')}/>
                                </label>
                            </div>
                        </div>
                    </div>

                    <div className="s-flex1">
                        <div className="step s-flex-d">
                            <div className="app-textAlgin app-333-font24">反面照片</div>
                            <div className="card">
                                <label for='upcard2'>
                                    <img id='upimg2' src={cardback} className="app-all-img"/>
                                    <input className='upcard' id='back' name='back' ref='back' type="file" id="upcard2" accept="image/*" onChange={this.upLoadImg.bind(this, 'upcard2', 'upimg2')}/>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="app-yellow-radius-check-button app-btn app-margin-lr40 app-margin-t30" onClick={this.auth.bind(this)}>
                    <div className="s-center">提交认证审核</div>
                </div>
            </form>
        )
    }

}

export default Authen;
